// 订单数量随时间增长曲线图
<template>
   <div  v-loading="loading" :style="{height: height+'px'}">
    <div :id="idName"></div>
   </div>
</template>

<script>

import { Chart } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'SpuSalesRanking',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: Number,
            default: 300,
        },
        axis: {
            type: [Boolean, Object],
            default: true,
        },
        label: {
            type: [String, Boolean],
            default: false,
        },
    },
    data() {
        return {
            chart: null,
            loading: false
        }
    },
    watch: {
        chartData(val) {
            if (val.length > 0) {
                this.loading = true
                if(this.chart) {
                    this.chart.destroy() 
                }
                this.$nextTick(() => {
                    this.render()
                    this.loading = false
                })
            }
        },
    },
    mounted() { },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
                padding: [30, 40, 90, 50],
            })
            // Step 2: 载入数据源
            this.chart.data(this.chartData)
            this.chart.axis('date', {
                label: {
                    rotate: -45,
                    offset: 30
                }
            })
            // Step 3：创建图形语法，绘制柱状图，由 quantity 和 date 两个属性决定图形位置，date 映射至 x 轴，quantity 映射至 y 轴
            this.chart
                .line()
                .position('date*quantity')
                // .shape('smooth')
                .label('quantity', {
                    // style: {
                    //     fill: '#fff',
                    // },
                })

            this.chart.scale({
                quantity: {
                    min: 0,
                    alias: '订单数量',
                },
                date: {
                    alias: '时间',
                    range: [0, 1],
                },
            })

            // this.chart.option('slider', {
            //     padding: [12, 0, 0, 0]
            // })
            this.chart.option('scrollbar', {
                type: 'horizontal',
                padding: [24, 0, 0, 0]
            })
            
            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>
